<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <link rel="icon" href="favicon.ico">
    <title>人格测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-i18n@9"></script>
    <script src="mainscript.js"></script>
    <script src="cn_text.js"></script>
    <script src="cn_enneagram.js"></script>
    <script src="jq.js"></script>
    <script src="jquerytest.js"></script>

    <div id="app">
        <nav class="navbar navbar-expand-lg navbar-light bg-light bg-gradient mb-4">
            <div class="container-fluid">
                <a class="navbar-brand me-md-5 px-2" href="index.html">{{ $t("test_title") }}</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav col-md-7" v-if="nostart || result_page || enneagram_result">
                        <li class="nav-item justify-content-center align-items-center">
                            <a class="nav-link text-dark justify-content-center align-items-center" href="#">{{
                                $t("Language_selection") }}</a>
                        </li>
                        <select name="Language" id="langselect"
                            class="nav-item dropdown Language justify-content-center align-items-center"
                            v-model="$i18n.locale">
                            <option value="zh">简体中文/Simplifed Chinese</option>
                            <option value="hk">繁体中文/Traditional Chinese</option>
                            <option value="ja">日本語/Japanese</option>
                            <option value="en">English</option>
                        </select>
                    </ul>
                    <div class="nav-item col-md-2 right">
                        <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">V.2023.8.21.0</a>
                    </div>
                    <!-- <div class="nav-item col-md-1 right">
                        <a href="https://github.com/LastEncore0/personalitytest" target="_blank"
                            class="mdui-btn mdui-btn-icon waves-effect tooltipped" data-tooltip="Github Repository">
                            <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 36 36"
                                enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon"
                                style="width: 24px;height:24px;">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#0e0a0a" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
         c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
         c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
         c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
         c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
         c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
                            </svg>
                        </a>
                    </div> -->
                </div>
            </div>
        </nav>
        <!-- <h1>{{ $t("test_title") }}</h1> -->

        <div v-if="nostart" class="container">
            <p class="text-dark justify-content-center align-items-center d-md-none">{{ $t("Language_selection") }}</p>
            <select name="Language" id="langselect"
                class="form-select Language justify-content-center align-items-center d-md-none" v-model="$i18n.locale">
                <option value="zh">简体中文/Simplifed Chinese</option>
                <option value="hk">繁体中文/Traditional Chinese</option>
                <option value="ja">日本語/Japanese</option>
            </select>
            <form class="row row-cols-1 row-cols-md-2">
                <div class="col">
                    <div class="card mb-3 border-0">
                        <div class="row g-0">
                            <div class="col-md-4 h-75">
                                <img src="img\enneagarm.png" class="card-img-top">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $t("ennegram_test") }}</h5>
                                    <p class="card-text">{{ $t("ennegram_dec") }}</p>
                                    <button type="button" class="btn btn-info btn-lg"
                                        @click="estart">{{$t("start_test")}}</button>
                                    <!-- <button @click="etest">etest</button> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-3 border-0">
                        <div class="row g-0">
                            <div class="col-md-4 h-75">
                                <img src="img\jungs.png" class="card-img-top">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $t("jung_test") }}</h5>
                                    <p class="card-text">{{ $t("jung_dec") }}</p>
                                    <button type="button" class="btn btn-info btn-lg"
                                        @click="start">{{$t("start_test")}}</button>
                                    <!-- <button @click="test">test</button> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- <div>
                <p>{{ $t("Language_selection") }}</p>
                <select name="Language" class="Language" v-model="$i18n.locale">
                    <option value="zh">简体中文/Simplifed Chinese</option>
                    <option value="hk">繁体中文/Traditional Chinese</option>
                </select>
            </div><br><br> -->

            <!-- <button type="button" :class="bclass" @mouseover="transbutton" @mouseleave="outbutton" @click="start">{{
                $t("jung_test") }}</button> -->
            <!-- <button @click="test">test</button> -->
            <!-- <h3 class="start_dec">{{ $t("jung_dec") }}</h3>
            <button type="button" :class="eclass" @click="estart">{{ $t("ennegram_test") }}</button> -->
            <!-- <button @click="etest">etest</button> -->
            <h3 class="text-danger">{{ $t("read_pls") }}</h3>
            <h5 class="start_dec">{{ $t("start_dec_text") }}</h5>
        </div>
        <div v-else-if="result_page">
            <h3>{{ $t("you_may") }}</h3>
            <div class="result_class">
                {{ result }}
            </div>
            <div class="result_text_class container">
                <p>{{ $t("title_result") }}</p>
                <p class="text-center">{{ $t(result_text) }}</p>
                <p class="text-center">{{ $t(result_text_last) }}</p>
                <div class="row">
                    <p>{{ $t("value_result") }}</p>
                    <div class="col-12 col-md-6 ">
                        <p>{{ $t("eight_type") }}</p>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Ti:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="tibar">
                            </div>
                            <span class="col-1">{{ user_data.ti }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Te:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="tebar">
                            </div>
                            <span class="col-1">{{ user_data.te }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Fi:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="fibar">
                            </div>
                            <span class="col-1">{{ user_data.fi }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Fe:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="febar">
                            </div>
                            <span class="col-1">{{ user_data.fe }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Si:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="sibar">
                            </div>
                            <span class="col-1">{{ user_data.si }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Se:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="sebar">
                            </div>
                            <span class="col-1">{{ user_data.se }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Ni:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="nibar">
                            </div>
                            <span class="col-1">{{ user_data.ni }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1 p-1">Ne:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="nebar">
                            </div>
                            <span class="col-1">{{ user_data.ne }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <p>{{ $t("trovet") }}</p>
                        <div class="result_progress row p-2">
                            <span class="col-1">I:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="Ibar">
                            </div>
                            <span class="col-1">{{ user_data.I }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1">E:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="Ebar">
                            </div>
                            <span class="col-1">{{ user_data.E }}</span>
                        </div>
                        <p>{{ $t("four_function") }}</p>
                        <div class="result_progress row p-2">
                            <span class="col-1">T:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="Tbar">
                            </div>
                            <span class="col-1">{{ user_data.T }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1">F:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="Fbar">
                            </div>
                            <span class="col-1">{{ user_data.F }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1">S:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="Sbar">
                            </div>
                            <span class="col-1">{{ user_data.S }}</span>
                        </div>
                        <div class="result_progress row p-2">
                            <span class="col-1">N:</span>
                            <div class="progress col-10 p-0 align-self-center" v-html="Nbar">
                            </div>
                            <span class="col-1">{{ user_data.N }}</span>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <h2>
                        {{ $t("maybe_character") }}
                    </h2>
                    <h5>{{ $t("maybe_character_dec") }}</h5>
                    <div class="col-12 col-md-4">
                        <div v-html="img1"></div>
                        <div>
                            {{ $t(C1) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div v-html="img2"></div>
                        <div>
                            {{ $t(C2) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div v-html="img3"></div>
                        <div>
                            {{ $t(C3) }}
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div v-else-if="enneagram_question" class="q_selection">
            <!-- <div>
                <p v-text="current_len + '/' + list_len" class="q_list_len"></p>
            </div> -->
            <div>
                <p v-if="enneagram_num < enneagram_q_num" v-text="$t(question_enneagram)" class="q_text"></p>
                <p v-else v-text="$t('what_statue')" class="q_text"></p>
            </div>
            <div v-for="answer in answer_enneagram">
                <button :class=answer.color @click="eanswer(answer.type,answer.value)">{{ $t(answer.text)
                    }}</button>
            </div>
        </div>
        <div v-else-if="enneagram_result">
            <div class="result_text_class container">
                <div class="row">
                    <h3>{{ $t("you_may") }}</h3>

                    <div class="result_class col-12">
                        {{ enneagram_test_result }} {{ $t(sin) }}<br>
                    </div>
                    <div class="col-12 fs-4">
                        {{ $t("result_trifix")}}{{ trifix }}<br>{{$t(enneagram_keyword) }}<br>
                    </div>
                    <p>{{ $t("title_result") }}</p>
                    <p v-html="$t(enneagram_result_dec)"></p>
                    <div class="col-12 col-md-6">
                        <div v-if="e_maybe[0]">
                            <div class="result_class col-12">
                                {{ $t("also_maybe")}}<br>
                            </div>
                            <button v-for="(maybetype,i) in e_maybe" class="maybe_button col-6 col-md-3"
                                data-bs-toggle="tooltip" data-bs-placement="bottom" title=""
                                @click="emayberesult(maybetype,i)">{{maybetype }}{{ $t("ennetype") }}</button>
                        </div>
                        <p class="fs-4"><br>{{ $t("value_result") }}</p>
                        <div class="enimg result_value">
                            <div class="IIposition">
                                <div class="c_progress II">
                                    <span class="c_progress-left II">
                                        <span class="c_progress-bar II" :style="{'--eleftII': eleft.II}"></span>
                                    </span>
                                    <span class="c_progress-right II">
                                        <span class="c_progress-bar II" :style="{'--erightII': eright.II}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.II }}</div>
                                </div>
                                <p class="e_toolitop heart badge text-wrap">2 {{ $t("pride") }}</p>
                            </div>
                            <div class="IIIposition">
                                <div class="c_progress III">
                                    <span class="c_progress-left III">
                                        <span class="c_progress-bar III" :style="{'--eleftIII': eleft.III}"></span>
                                    </span>
                                    <span class="c_progress-right III">
                                        <span class="c_progress-bar III" :style="{'--erightIII': eright.III}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.III }}</div>
                                </div>
                                <p class="e_toolitop heart badge text-wrap">3 {{ $t("vanity") }}</p>
                            </div>
                            <div class="IVposition">
                                <div class="c_progress IV">
                                    <span class="c_progress-left IV">
                                        <span class="c_progress-bar IV" :style="{'--eleftIV': eleft.IV}"></span>
                                    </span>
                                    <span class="c_progress-right IV">
                                        <span class="c_progress-bar IV" :style="{'--erightIV': eright.IV}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.IV }}</div>
                                </div>
                                <p class="e_toolitop heart badge text-wrap">4 {{ $t("envy") }}</p>
                            </div>
                            <div class="Vposition">
                                <div class="c_progress V">
                                    <span class="c_progress-left V">
                                        <span class="c_progress-bar V" :style="{'--eleftV': eleft.V}"></span>
                                    </span>
                                    <span class="c_progress-right V">
                                        <span class="c_progress-bar V" :style="{'--erightV': eright.V}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.V }}</div>
                                </div>
                                <p class="e_toolitop head badge text-wrap">5 {{ $t("avarice") }}</p>
                            </div>
                            <div class="VIposition">
                                <div class="c_progress VI">
                                    <span class="c_progress-left VI">
                                        <span class="c_progress-bar VI" :style="{'--eleftVI': eleft.VI}"></span>
                                    </span>
                                    <span class="c_progress-right VI">
                                        <span class="c_progress-bar VI" :style="{'--erightVI': eright.VI}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.VI }}</div>
                                </div>
                                <p class="e_toolitop head badge text-wrap">6 {{ $t("cowardice") }}</p>
                            </div>
                            <div class="VIIposition">
                                <div class="c_progress VII">
                                    <span class="c_progress-left VII">
                                        <span class="c_progress-bar VII" :style="{'--eleftVII': eleft.VII}"></span>
                                    </span>
                                    <span class="c_progress-right VII">
                                        <span class="c_progress-bar VII" :style="{'--erightVII': eright.VII}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.VII }}</div>
                                </div>
                                <p class="e_toolitop head badge text-wrap">7 {{ $t("gluttony") }}</p>
                            </div>
                            <div class="VIIIposition">
                                <div class="c_progress VIII">
                                    <span class="c_progress-left VIII">
                                        <span class="c_progress-bar VIII" :style="{'--eleftVIII': eleft.VIII}"></span>
                                    </span>
                                    <span class="c_progress-right VIII">
                                        <span class="c_progress-bar VIII" :style="{'--erightVIII': eright.VIII}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.VIII }}</div>
                                </div>
                                <p class="e_toolitop gut badge text-wrap">8 {{ $t("lust") }}</p>
                            </div>
                            <div class="IXposition">
                                <div class="c_progress IX">
                                    <span class="c_progress-left IX">
                                        <span class="c_progress-bar IX" :style="{'--eleftIX': eleft.IX}"></span>
                                    </span>
                                    <span class="c_progress-right IX">
                                        <span class="c_progress-bar IX" :style="{'--erightIX': eright.IX}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.IX }}</div>
                                </div>
                                <p class="e_toolitop gut badge text-wrap">9 {{ $t("indolence") }}</p>
                            </div>
                            <div class="Iposition">
                                <div class="c_progress I">
                                    <span class="c_progress-left I">
                                        <span class="c_progress-bar IV" :style="{'--eleftI': eleft.I}"></span>
                                    </span>
                                    <span class="c_progress-right I">
                                        <span class="c_progress-bar IV" :style="{'--erightI': eright.I}"></span>
                                    </span>
                                    <div class="c_progress-value">{{ enneagram_data.I }}</div>
                                </div>
                                <p class="e_toolitop gut badge text-wrap">1 {{ $t("anger") }}</p>
                            </div>
                            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        </div>

                        <!-- <div class="result_value">
                            <p>{{ $t("Heart_value") }}</p>
                            <p class="result_progress">
                                <span>2:</span>
                                <progress :value="enneagram_data.II" max="100" class="F_bar"></progress>
                                {{ enneagram_data.II }}<br>
                            </p>
                            <p class="result_progress">
                                <span>3:</span>
                                <progress :value="enneagram_data.III" max="100" class="F_bar"></progress>
                                {{ enneagram_data.III }}<br>
                            </p>
                            <p class="result_progress">
                                <span>4:</span>
                                <progress :value="enneagram_data.IV" max="100" class="F_bar"></progress>
                                {{ enneagram_data.IV }}<br>
                            </p>
                            <p>{{ $t("Head_value") }}</p>
                            <p class="result_progress">
                                <span>5:</span>
                                <progress :value="enneagram_data.V" max="100" class="T_bar"></progress>
                                {{ enneagram_data.V }}<br>
                            </p class="result_progress">
                            <p class="result_progress">
                                <span>6:</span>
                                <progress :value="enneagram_data.VI" max="100" class="T_bar"></progress>
                                {{ enneagram_data.VI }}<br>
                            </p>
                            <p class="result_progress">
                                <span>7:</span>
                                <progress :value="enneagram_data.VII" max="100" class="T_bar"></progress>
                                {{ enneagram_data.VII }}<br>
                            </p>
                            <p>{{ $t("Gut_value") }}</p>
                            <p class="result_progress">
                                <span>8:</span>
                                <progress :value="enneagram_data.VIII" max="100" class="N_bar"></progress>
                                {{ enneagram_data.VIII }}<br>
                            </p>
                            <p class="result_progress">
                                <span>9:</span>
                                <progress :value="enneagram_data.IX" max="100" class="N_bar"></progress>
                                {{ enneagram_data.IX }}<br>
                            </p>
                            <p class="result_progress">
                                <span>1:</span>
                                <progress :value="enneagram_data.I" max="100" class="N_bar"></progress>
                                {{ enneagram_data.I }}<br>
                            </p>
                        </div> -->
                    </div>

                    <div class="col-12 col-md-6">
                        <br>
                        <table>
                            <tr>
                                <h2>
                                    {{ $t("maybe_character") }}
                                </h2>
                            </tr>
                            <tr>
                                <td v-html="img1"></td>
                            </tr>
                            <tr>
                                <td>
                                    {{ $t(C1) }}
                                </td>
                            </tr>
                            <tr>
                                <td class="td_text">
                                    {{ $t(C1text) }}
                                </td>
                            </tr>
                            <tr v-if="C2">
                                <td v-html="img2"></td>
                            </tr>
                            <tr v-if="C2">
                                <td>
                                    {{ $t(C2) }}
                                </td>
                            </tr>
                            <tr v-if="C2">
                                <td class="td_text">
                                    {{ $t(C2text) }}
                                </td>
                            </tr>
                            <tr v-if="C3">
                                <td v-html="img3"></td>
                            </tr>
                            <tr v-if="C3">
                                <td>
                                    {{ $t(C3) }}
                                </td>
                            </tr>
                            <tr v-if="C3">
                                <td class="td_text">
                                    {{ $t(C3text) }}
                                </td>
                            </tr>
                            <!-- <tr>
                                    <td v-html="img3"></td>
                                </tr>
                                <tr>
                                    <td>
                                        {{ C3 }}
                                    </td>
                                </tr> -->
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <div v-else-if="no_result">
            <h2>{{ $t("no_result_text") }}</h2>
            <button type="button" class="refreshclass" @click="refresh">{{ $t("restart_button") }}</button>
            <h4>{{ $t("no_result_dec") }}</h4>
        </div>
        <div v-else class="q_selection">
            <div>
                <p v-text="current_len + '/' + list_len" class="q_list_len"></p>
            </div>
            <div>
                <p v-text="$t(question_key)" class="q_text"></p>
            </div>
            <div>
                <button class="more_yes" @click="answer(3)">{{ $t("more_yes_text") }}</button>
            </div>
            <div>
                <button class="yes" @click="answer(2)">{{ $t("yes_text") }}</button>
            </div>
            <div>
                <button class="little_yes" @click="answer(1)">{{ $t("little_yes_text") }}</button>
            </div>
            <div>
                <button class="netural" @click="answer(0)">{{ $t("netural_text") }}</button>
            </div>
            <div>
                <button class="little_no" @click="answer(-1)">{{ $t("little_no_text") }}</button>
            </div>
            <div>
                <button class="no" @click="answer(-2)">{{ $t("no_text") }}</button>
            </div>
            <div>
                <button class="more_no" @click="answer(-3)">{{ $t("more_no_text") }}</button>
            </div>
            <h3 class="warning">{{ $t("Warning_text") }}</h2>
        </div>

    </div>

    <script type="module" src="vuescript.js"></script>
    <script type="module" src="vuei18n.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
        crossorigin="anonymous"></script>
</body>

</html>